<extend name="template/base_index"/>

<block name="area_header">
    <present name="data">
        <link rel="stylesheet" type="text/css" href="__CDN__/jquery-dragsort/0.5.1/dragsort.css" />
    </present>
    <style>
        .dragsort {
            width: 400px;
        }
    </style>
</block>

<block name="area_body">

    {:W('Menus/topbar')}
    <div class="admin-main container-fluid">
        {:W('Menus/left')}
        <div class="admin-main-content">
            {:W('Menus/breadcrumb')}
            <!-- 标题栏 -->
            <h2>
                <present name="data">编辑
                    <else/>
                    新增
                </present>
                钩子
            </h2>

            <!-- 修改密码表单 -->
            <form action="{:U('updateHook')}" method="post" class="form-horizontal">
                <div class="form-group">
                    <label class="control-label col-lg-2 col-md-2">&nbsp;</label>
                    <div class="col-lg-10 col-md-10">
                        <button type="submit" class="btn btn-sm btn-primary submit-btn ajax-post" target-form="form-horizontal">确 定</button>
                        <button class="btn btn-sm btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
                    </div>
                </div>
                <div class="form-group clearfix">
                    <label class="control-label col-lg-2 col-md-2">钩子名称<span class="check-tips">（需要在程序中先添加钩子，否则无效）</span></label>

                    <div class="col-lg-10 col-md-10">
                        <input type="text" value="{$data.name}" name="name" class="text input-large">
                    </div>
                </div>
                <div class="form-group clearfix">
                    <label class="control-label col-lg-2 col-md-2">钩子描述<span class="check-tips">（钩子的描述信息）</span></label>

                    <div class="col-lg-10 col-md-10">
                        <textarea class="form-control" rows="5" name="description">{$data.description}</textarea>
                    </div>
                </div>
                <div class="form-group cf">
                    <label class="control-label col-lg-2 col-md-2">钩子类型<span class="check-tips">（区分钩子的主要用途）</span></label>

                    <div class="col-lg-10 col-md-10">
                        <select name="type" class="form-control input-normal">
                            <volist name=":C('HOOKS_TYPE')" id="vo">
                                <option value="{$key}"
                                <eq name="data.type" value="$key"> selected</eq>
                                >{$vo}</option>
                            </volist>
                        </select>
                    </div>
                </div>
                <present name="data">
                    <div class="form-group clearfix">
                        <label class="control-label col-lg-2 col-md-2">钩子挂载的插件排序<span class="help-block">（拖动后保存顺序，影响同一个钩子挂载的插件执行先后顺序）</span></label>

                        <div class="col-md-10 col-lg-10">
                            <input type="hidden" name="addons" value="{$data.addons}" readonly>
                            <empty name="data.addons">
                                暂无插件，无法排序
                                <else/>
                                <ul id="sortUl" class="list-unstyled dragsort">
                                    <volist name=":explode(',',$data['addons'])" id="addons_vo">
                                        <li class="getSort"><b>&times;</b><em>{$addons_vo}</em></li>
                                    </volist>
                                </ul>

                            </empty>
                        </div>
                    </div>
                </present>
                <input type="hidden" name="id" value="{$data.id}">
                <div class="form-group">
                    <label class="control-label col-lg-2 col-md-2">&nbsp;</label>
                    <div class="col-lg-10 col-md-10">
                        <button type="submit" class="btn btn-sm btn-primary submit-btn ajax-post" target-form="form-horizontal">确 定</button>
                        <button class="btn btn-sm btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</block>

<block name="area_footer">
    <present name="data">
        <script type="text/javascript" src="__CDN__/jquery-dragsort/0.5.1/jquery.dragsort.fix_for1.11.0.js"></script>
    </present>
    <script type="text/javascript">
        $(function () {
            $("#sortUl").dragsort({
                dragSelector: 'li',
                placeHolderTemplate: '<li class="draging-place">&nbsp;</li>',
                dragEnd: function () {
                    updateVal();
                }
            });

            $('#sortUl li b').click(function () {
                $(this).parent().remove();
                updateVal();
            });

            // 更新排序后的隐藏域的值
            function updateVal() {
                var sortVal = [];
                $('#sortUl li').each(function () {
                    sortVal.push($('em', this).text());
                });
                $("input[name='addons']").val(sortVal.join(','));
            }
        })
    </script>
</block>